<template>
  <el-drawer
    :visible.sync="drawer"
    direction="rtl"
    size="45%"
    :with-header="false"
    :width="700"
  >
    <div class="drawer_box">
      <div class="drawer_t">
        <div class="drawer_t_l">
          <img
            class="drawer_t_l_img"
            src="/static/skin/herodoo/main/platform/home/img/quanyishaixuan.png"
            alt=""
          />
          权益筛选
        </div>
        <img
          class="drawer_t_r"
          src="/static/skin/herodoo/main/platform/home/img/guanbi.png"
          alt=""
          @click="drawer = false"
        />
      </div>
      <div class="drawer_c">
        <div class="drawer_c_title">
          <img
            src="/static/skin/herodoo/main/platform/home/img/shaixuannr.png"
            alt=""
            class="drawer_c_title_img"
          />
          筛选内容
        </div>
        <div class="exhibition">
          <div class="exhibition_title">所选内容:</div>
          <div class="exhibition_content">
            <div
              class="exhibition_content_list"
              v-for="item in statusArr"
              :key="item"
              @click="deleteExhibition(item, 1)"
            >
              <div class="content_list_name">{{ item }}</div>
              <img
                class="content_list_img"
                src="/static/skin/herodoo/main/platform/home/img/shanchud.png"
                alt=""
              />
            </div>
          </div>
          <div class="clear" @click="clear">一键清空</div>
        </div>
      </div>
      <div class="drawer_l">
        <div class="exhibition">
          <div class="exhibition_title">活动状态:</div>
          <div class="drawer_l_content">
            <el-checkbox-group v-model="statusArr">
              <el-checkbox
                v-for="(item, index) in statusClass"
                :key="index"
                :label="item.Name"
              ></el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
      </div>
      <div class="drawer_b">
        <span class="drawer_sx" @click="search">
          筛选
        </span>
      </div>
    </div>
  </el-drawer>
</template>

<script>
export default {
  data() {
    return {
      octopus: this.$parent.octopus,
      // 审核状态
      statusClass: [],
      statusArr: [],

      minIndustryArr: [],
      drawer: false,
      // 价格区间
      priceStar: "",
      priceEnd: "",
      value1: "",
      dateData: []
    };
  },

  mounted() {},
  created() {
    this.init();
  },
  methods: {
    init() {
      let o = this;
      // 审核状态
      this.octopus.request.api.post(
        "/Octopus/Engine/List",
        {
          id: 1344,
          cellData: [
            { name: "ID" }, // ID
            { name: "Name" } // Name
          ]
        },
        function(data) {
          if (data.status.code == 200) {
            o.statusClass = data.content.queryData;
          } else {
            o.octopus.tips.error(data);
          }
        }
      );
    },
    // 一键清空
    clear() {
      this.statusArr = [];
      this.$refs.tree.setCheckedKeys([]);
    },
    //删除所选权益
    deleteExhibition(item, ind) {
      if (ind == 1) {
        this.statusArr = this.statusArr.filter(items => items != item);
      }
    },
    handleClose(done) {
      this.drawer = false;
    },
    drawerOp() {
      this.drawer = true;
    },
    // 筛选
    search() {
      // 审核状态
      let statusType = this.statusClass
        .filter(item => this.statusArr.includes(item.Name))
        .map(item => item.ID);
      this.$emit("searchFun", statusType);
      this.drawer = false;
    }
  }
};
</script>
<style scoped>
.clear {
  text-decoration: underline;
  position: absolute;
  font-size: 1.2rem;
  color: #898582;
  cursor: pointer;
  bottom: 0.5rem;
  right: 1rem;
}

.exhibition_content div {
  display: flex;
  align-items: center;
  background-color: #fbf8f9;
  height: 3rem;
  padding: 0 0.4rem;
  margin: 0.4rem;
  color: #898582;
  font-size: 1.2rem;
  border-radius: 1rem;
}

.content_list_img {
  cursor: pointer;
  width: 2rem;
  height: 2rem;
}

>>> .el-checkbox {
  margin-top: 1.5rem;
  width: 25%;
  padding-left: 1rem;
  margin-right: 0;
}

>>> .el-tree .el-checkbox__inner {
  margin-bottom: 1rem;
  width: 1.6rem;
  height: 1.6rem;
  /* vertical-align: top; */
}

.navsIndex {
  z-index: 10 !important;
}

.drawer_box {
  padding: 3rem 1.5rem;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.drawer_t {
  display: flex;
  justify-content: space-between;
}

.drawer_t_l {
  display: flex;
  align-items: center;
  font-size: 1.8rem;
  font-weight: bold;
}

.drawer_t_l_img {
  width: 1.4vw;
  margin-right: 1vh;
}

.drawer_t_r {
  width: 3rem;
  height: 3rem;
  cursor: pointer;
}

.drawer_c {
  border-radius: 1rem;
  margin: 2rem 0;
  padding: 2rem;
  padding-bottom: 0;
  box-shadow: inset 0px 0px 4px 0px #e9e9e9;
  background: #fdfdfd;
}

.drawer_l {
  border-radius: 1rem;
  padding: 0 2rem;
  padding-bottom: 0;
  box-shadow: inset 0px 0px 4px 0px #e9e9e9;
  background: #fdfdfd;
  height: 58vh;
  padding-bottom: 1rem;
  box-sizing: border-box;
  overflow: auto;
}

.drawer_c_title {
  display: flex;
  align-items: center;
  font-weight: bold;
  font-size: 1.8rem;
}

.drawer_c_title_img {
  width: 3rem;
  height: 3rem;
}

.exhibition {
  display: flex;
  justify-content: space-between;
  margin: 2rem 0;
  position: relative;
}

.exhibition_title {
  font-size: 1.6rem;
}

.exhibition_content {
  display: flex;
  flex-wrap: wrap;
  max-height: 10rem;
  height: 10rem;
  overflow: auto;
  background-color: #fff;
  border: 1px solid #ebebeb;
  width: 85%;
  border-radius: 1rem;
  padding: 0.2rem;
}

.drawer_l_content {
  display: flex;
  flex-wrap: wrap;
  overflow: auto;
  background-color: #fff;
  border: 1px solid #ebebeb;
  width: 85%;
  border-radius: 1rem;
  padding: 0.2rem;
  padding-bottom: 2rem;
  font-size: 1.6rem;
}

.drawer_l_content .customize_price {
  margin-top: 1rem;
  line-height: 3rem;
  /* padding-right: 1rem; */
  margin-left: 1rem;
}

.drawer_l_content .customize_price input {
  border: 1px solid #ebebeb;
  padding: 0 1rem;
  border-radius: 0.5rem;
}

.drawer_l_content .customize_price input::placeholder {
  font-size: 1.6rem;
  /* 设置你想要的字体大小 */
}

.drawer_l_content .customize_price span {
  margin: 0 1rem;
}

.nav_title {
  margin-top: 2rem;
  padding-left: 1rem;
}

.drawer_b {
  height: 4rem;
  display: flex;
  position: absolute;
  bottom: 1rem;
  right: 1.6rem;
  justify-content: end;
}

.drawer_sx {
  padding: 1rem 4rem;
  background-color: #f78c51;
  color: #fff;
  font-size: 1.6rem;
  border-radius: 1rem;
  cursor: pointer;
}

>>> .el-checkbox__label {
  font-size: 1.5rem;
}

>>> .el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: #f78c51;
  border-color: #f78c51;
}

>>> .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: #f78c51;
  border-color: #f78c51;
}

>>> .el-checkbox__input.is-checked + .el-checkbox__label {
  color: #f78c51;
}
</style>
